<!--
 * @Description: file content
 * @Author: oooh
 * @Date: 2024-05-20 15:32:44
 * @LastEditors: oooh
 * @LastEditTime: 2024-08-05 10:34:51
 * @FilePath: \Civil_Servant_Performance_PC\src\views\work\work-filling-cycle\index.vue
-->
<template>
  <div class="app-container">
    <div class="text-banner">
      <span>工作填报周期</span>
      <el-button size="mini" type="primary" circle icon="el-icon-refresh" plain @click="getList" />
    </div>
    <el-table :data="tableList" border style="width: 100%">
      <el-table-column label="序号" type="index" align="center">
        <template slot-scope="scope">
          <span>{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="year" label="年度" align="center">
        <template slot-scope="scope">
          <el-select v-if="scope.row.isAdd" v-model="scope.row.year" placeholder="请选择年度" @change="handleYearChange">
            <el-option v-for="item in dict.type.biz_work_year_list" :key="item.value" :label="item.label" :value="item.value"> </el-option>
          </el-select>
          <span v-else>{{ scope.row.year || '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="quarter" label="季度" align="center">
        <template slot-scope="scope">
          <el-select v-if="scope.row.isAdd" v-model="scope.row.quarter" placeholder="请选择季度">
            <el-option v-for="item in quarterOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
          </el-select>
          <span v-else>{{ scope.row.quarter || '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="startDate" label="申报开始日期" align="center">
        <template slot-scope="scope">
          <el-date-picker v-model="scope.row.startDate" type="date" value-format="yyyy-MM-dd" placeholder="选择申报开始日期" v-if="scope.row.isEdit">
          </el-date-picker>
          <span v-else>{{ scope.row.startDate || '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="endDate" label="申报截止日期" align="center">
        <template slot-scope="scope">
          <el-date-picker v-model="scope.row.endDate" type="date" value-format="yyyy-MM-dd" placeholder="选择申报截止日期" v-if="scope.row.isEdit">
          </el-date-picker>
          <span v-else>{{ scope.row.endDate || '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="remarks" label="备注" align="center">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.remarks"
            placeholder="输入备注"
            type="textarea"
            :rows="1"
            :autosize="{ minRows: 1, maxRows: 3 }"
            v-if="scope.row.isEdit"
          ></el-input>
          <span v-else>{{ scope.row.remarks || '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="text" size="mini" v-if="!scope.row.isEdit" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <div v-else>
            <el-button type="text" size="mini" @click="handleSave(scope.$index, scope.row)">保存</el-button>
            <el-button type="text" size="mini" v-if="scope.$index !== tableList.length - 1" @click="handleCancel(scope.$index, scope.row)"
              >取消</el-button
            >
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { list, add, update } from '@/api/work/filling-cycle'
import { quarterFormat, quarterToMonth } from '@/utils/quarter.js'

export default {
  name: 'work-filling-cycle',
  props: {},
  dicts: ['biz_work_year_list'],

  components: {},
  data() {
    return {
      isEdit: true,
      tableList: [],

      tableItem: {
        year: '',
        quarter: '',
        startDate: '',
        endDate: '',
        remarks: '',
        isEdit: true,
        isAdd: true
      },
      quarterOptions: []
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getList()
  },
  methods: {
    // 年度选择
    handleYearChange(year) {
      // 获取当前季度、季度列表（往年默认第一季度）
      let { quarterList } = quarterFormat(year)
      this.quarterOptions = quarterList
    },
    getList() {
      list().then(res => {
        this.tableList = res.rows.map(item => {
          return { ...item, isEdit: false }
        })
        this.tableList.push(JSON.parse(JSON.stringify(this.tableItem)))
      })
    },
    handleCancel(index, raw) {
      this.$set(this.tableList[index], 'isEdit', false)
    },
    handleSave(index, raw) {
      if (raw.id) {
        update({ id: raw.id, ...raw }).then(res => {
          this.$modal.msgSuccess('已保存')
          this.getList()
        })
      } else {
        add(raw).then(res => {
          this.$modal.msgSuccess('已添加')
          this.getList()
        })
      }
    },
    handleEdit(index, raw) {
      this.$set(this.tableList[index], 'isEdit', true)
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-date-editor.el-input {
  width: auto;
}
</style>
